Progress Indicator

Progress Indicator

A progress indicator component communicates to the user the progress of a particular process.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="demo-only" style="padding:1rem;">
  <div class="slds-progress">
    <ol class="slds-progress__list">
      <li class="slds-progress__item slds-is-active">
        <button class="slds-button slds-progress__marker">
          <span class="slds-assistive-text">Step 1 - Active</span>
        </button>
      </li>
      <li class="slds-progress__item">
        <button class="slds-button slds-progress__marker">
          <span class="slds-assistive-text">Step 2 </span>
        </button>
      </li>
      <li class="slds-progress__item">
        <button class="slds-button slds-progress__marker">
          <span class="slds-assistive-text">Step 3 </span>
        </button>
      </li>
      <li class="slds-progress__item">
        <button class="slds-button slds-progress__marker">
          <span class="slds-assistive-text">Step 4 </span>
        </button>
      </li>
      <li class="slds-progress__item">
        <button class="slds-button slds-progress__marker">
          <span class="slds-assistive-text">Step 5 </span>
        </button>
      </li>
    </ol>
    <div class="slds-progress-bar slds-progress-bar_x-small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" role="progressbar">
      <span class="slds-progress-bar__value" style="width:0%;">
        <span class="slds-assistive-text">Progress: 0%</span>
      </span>
    </div>
  </div>
</div>

About Progress Indicator

The progress indicator communicates to the user which step of a process they may be on. The length of the progress bar can be changed by modifying the value on <progress class="slds-progress-bar" /> with JavaScript. The .slds-progress-bar accepts a range from 0% to 100%.

When a step becomes active, the .slds-progress__item should get the class .slds-is-active. This class should be applied through JavaScript. When the step is completed, the .slds-is-active class should be replaced with the class .slds-is-completed on .slds-progress__item. At that point, the .slds-progress__item element should receive a "success" icon, providing feedback that the step has been completed.


Overview of CSS Classes

Selector.slds-progress
Summary
Restrictdiv
VariantTrue
Selector.slds-progress_shade
Summary

When on a shaded background such as the modal footer

Restrict.slds-progress
ModifierTrue
Selector.slds-progress__list
Summary

An ordered list containing steps of a process

Restrict.slds-progress ol
Selector.slds-progress__item
Summary

A list item for each step of the process

Restrict.slds-progress ol li
Selector.slds-is-completed
Summary

Stateful class for a completed step, .slds-progress__item should receive a success icon at this point

Restrict.slds-progress__item
ModifierTrue
Selector.slds-is-active
Summary

Stateful class for the active step

Restrict.slds-progress__item
ModifierTrue
Selector.slds-has-error
Summary

Indicates error state for a step in the progress

Restrict.slds-progress__item
ModifierTrue
Selector.slds-progress__marker
Summary

Dot indicator for each step

Restrict.slds-progress ol li button
Selector.slds-progress__marker_icon
Summary

Modifier that notifies the marker indicator that the step has been completed and its getting an icon

Restrict.slds-progress__marker